<template>
  <div class="model-container">

    <div class="listName">商家审核</div>

    <!--表格-->
    <el-card style="margin-top: 10px">
      <div class="table-wrapper">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="资质审核" name="first"/>
          <el-tab-pane label="信息审核" name="second"/>
        </el-tabs>
        <el-table v-loading="!dataOption" :data="dataOption" stripe border empty-text="暂无数据">

          <el-table-column align="center" prop="sellerName" label="店铺名称"/>

          <el-table-column align="center" prop="addrStreet" label="所在地区"/>

          <el-table-column align="center" prop="contactPerson" label="负责人姓名"/>

          <el-table-column align="center" prop="contactMobile" label="联系电话"/>

          <el-table-column align="center" prop="createTime" label="创建时间"/>

          <el-table-column align="center" label="详情">
            <template slot-scope="scope"><span style="color: #3399FF;cursor: pointer" @click="detailsFun(scope.row)">查看</span></template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="210px">
            <template slot-scope="scope">

              <el-button title="通过" type="primary" circle icon="el-icon-check" class="table-icon" @click="throughFun(scope.row)"/>

              <el-button title="不通过" type="warning" circle icon="el-icon-close" class="table-icon" @click="refusedFun(scope.row)"/>

            </template>
          </el-table-column>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>

      </div>
    </el-card>

    <!--弹框-->
    <el-dialog
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      :before-close="handleClose"
      title="通过提示"
      top="5vh"
      width="40%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon class="demo-ruleForm">
        <div class="tinymce-container">
          <el-form-item label="分配店铺名称" prop="sysSellerName">
            <el-input v-model="dialogBindData.sysSellerName" size="small" type="text" placeholder="请输入店铺名称" maxlength="20"/>
          </el-form-item>
        </div>
        <div class="btns-wrapper">
          <template>
            <el-button size="small" @click="handleClose">取 消</el-button>
            <el-button type="primary" size="small" @click="throughFunNew">通 过</el-button>
          </template>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as merchant from '../../api/merchant'
export default {
  data() {
    return {
      // tab
      activeName: 'first',
      pageNo: 1,
      pageSize: 10,
      rowCount: null, // 总条数
      // 弹框
      dialogState: false,
      // 列表数据
      dataOption: null,
      // 提交数据
      dialogBindData: {
        sellerId: null,
        sysSellerName: '',
        addrRegion1Name: '',
        addrRegion2Name: '',
        addrRegion3Name: '',
        addrStreet: '',
        contactMobile: ''
      },
      rules: {
        sysSellerName: [
          { required: true, message: '请输入分配店铺名称', trigger: 'blur' }
        ]
      }
    }
  },
  beforeMount() {
    this.getList(0)
  },
  methods: {
    getList(type) {
      const param = {
        current: this.pageNo,
        size: this.pageSize,
        censorStatus: type
      }
      merchant.getMerchantsList(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data.records
        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },
    // tab点击配置管理
    handleClick() {
      this.dataOption = null
      if (this.activeName === 'first') {
        this.getList(0)
      } else if (this.activeName === 'second') {
        this.getList(3)
      }
    },
    // 查看
    detailsFun(data) {
      this.$router.push({
        name: '/v1/merchant_add',
        params: {
          data: data,
          dialogType: 3
        }
      })
    },
    // 拒绝
    refusedFun(data) {
      const param = {
        sellerId: data.sellerId
      }
      if (this.activeName === 'first') {
        param.censorStatus = 2
      } else if (this.activeName === 'second') {
        param.censorStatus = 5
      }
      this.$prompt('请输入拒绝原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        param.reasonRefusal = value
        this.merchantsStatus(param)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 通过
    throughFun(data) {
      this.dialogBindData.sellerId = data.sellerId
      this.dialogBindData.addrRegion1Name = data.addrRegion1Name
      this.dialogBindData.addrRegion2Name = data.addrRegion2Name
      this.dialogBindData.addrRegion3Name = data.addrRegion3Name
      this.dialogBindData.addrStreet = data.addrStreet
      this.dialogBindData.contactMobile = data.contactMobile

      if (this.activeName === 'first') {
        this.dialogState = true
      } else if (this.activeName === 'second') {
        this.$confirm('确认通过此商家吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.throughFunNew()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }
    },
    throughFunNew() {
      const param = {
        sellerId: this.dialogBindData.sellerId,
        addrRegion1Name: this.dialogBindData.addrRegion1Name,
        addrRegion2Name: this.dialogBindData.addrRegion2Name,
        addrRegion3Name: this.dialogBindData.addrRegion3Name,
        addrStreet: this.dialogBindData.addrStreet

      }
      if (this.activeName === 'first') {
        this.$refs.dialogBindData.validate((valid) => {
          if (valid) {
            param.sysSellerName = this.dialogBindData.sysSellerName
            param.censorStatus = 1
            this.merchantsStatus(param)
          }
        })
      } else if (this.activeName === 'second') {
        param.contactMobile = this.dialogBindData.contactMobile
        param.censorStatus = 4
        this.merchantsStatus(param)
      }
    },
    merchantsStatus(param) {
      merchant.statusMerchant(param).then(res => {
        if (res.data.code === 1) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          if (this.activeName === 'first') {
            this.getList(0)
          } else if (this.activeName === 'second') {
            this.getList(3)
          }
          this.dialogState = false
        } else {
          this.$message({
            type: 'warning',
            message: res.data.msg
          })
        }
      })
    },
    handleClose() {
      this.dialogState = false
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      this.getList()
    }
  }
}
</script>
<style type="text/scss" lang="scss">
  .formBody {
    .el-dialog__body{
      padding: 10px;
    }
  }
  .el-tabs__header{
    margin: 0;
    margin-bottom: 20px;
  }
</style>
<style type="text/scss" lang="scss" scoped>
  .formBody{
    height: 600px;
    overflow: auto;
  }
</style>
